<template>
  <div v-show="isActive">
    <slot />
  </div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Tab',
  props: {
    title: {
      type: String
    }
  },
  inject: ["$tabsProvider"],
  data() {
    return {
      index: 0,
      isActive: false
    }
  },
  beforeMount() {
    this.index = this.$tabsProvider.count;
    this.$tabsProvider.count++;
    this.isActive = this.index === this.$tabsProvider.selectedIndex;
  },
  watch: {
    "$tabsProvider.selectedIndex": {
      handler(val, oldVal) {
        this.isActive = this.index === this.$tabsProvider.selectedIndex;
      },
      deep: true
    }
  }
})
</script>
<style lang="">

</style>